<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D模型展示平台</title>
    <!-- 配置模块导入映射 -->
    <script type="importmap">
    {
        "imports": {
            "three": "https://threelab.cn/openthree/threejs/build/three.module.js",
            "three/addons/": "https://threelab.cn/openthree/threejs/examples/jsm/"
        }
    }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #121212;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        #renderContainer {
            width: 100%;
            height: 100%;
        }
        
        .loading-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial, sans-serif;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!-- 3D渲染容器 -->
    <div id="renderContainer"></div>
    <!-- 加载指示器 -->
    <div class="loading-indicator" id="loaderStatus">加载中... 0%</div>
    
    <script type="module">
        // 导入Three.js核心模块和扩展
        import * as THREE from "three";
        import { OrbitControls } from "three/addons/controls/OrbitControls.js";
        import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
        import { GUI } from "three/addons/libs/lil-gui.module.min.js";

        // 调试信息 - 输出Three.js版本
        console.log('当前使用的Three.js版本:', THREE.REVISION);

        // 初始化核心组件
        const container = document.getElementById('renderContainer');
        const loadingStatus = document.getElementById('loaderStatus');
        
        // 场景初始化
        const mainScene = new THREE.Scene();
        mainScene.background = new THREE.Color(0x1a1a1a);
        
        // 相机配置
        const viewCamera = new THREE.PerspectiveCamera(
            60, 
            container.clientWidth / container.clientHeight, 
            0.01, 
            2000
        );
        viewCamera.position.set(5, 8, 15);
        viewCamera.lookAt(0, 0, 0);
        
        // 渲染器设置
        const sceneRenderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: false
        });
        sceneRenderer.setSize(container.clientWidth, container.clientHeight);
        sceneRenderer.shadowMap.enabled = true;
        sceneRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
        container.appendChild(sceneRenderer.domElement);
        
        // 控制器配置
        const cameraControls = new OrbitControls(viewCamera, sceneRenderer.domElement);
        cameraControls.enableDamping = true;
        cameraControls.dampingFactor = 0.1;
        cameraControls.enableZoom = true;
        cameraControls.zoomSpeed = 0.7;
        
        // 窗口大小自适应
        function handleWindowResize() {
            const newWidth = container.clientWidth;
            const newHeight = container.clientHeight;
            
            viewCamera.aspect = newWidth / newHeight;
            viewCamera.updateProjectionMatrix();
            
            sceneRenderer.setSize(newWidth, newHeight);
        }
        
        window.addEventListener('resize', handleWindowResize);
        
        // 创建环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
        mainScene.add(ambientLight);
        
        // 创建主光源
        const mainLight = new THREE.DirectionalLight(0xffffff, 1.2);
        mainLight.position.set(30, 60, 40);
        mainLight.castShadow = true;
        
        // 配置阴影属性
        mainLight.shadow.mapSize.set(4096, 4096);
        mainLight.shadow.camera.near = 10;
        mainLight.shadow.camera.far = 150;
        mainLight.shadow.camera.left = -50;
        mainLight.shadow.camera.right = 50;
        mainLight.shadow.camera.top = 50;
        mainLight.shadow.camera.bottom = -50;
        
        mainScene.add(mainLight);
        
        // 创建地面
        const groundGeometry = new THREE.PlaneGeometry(100, 100);
        const groundMaterial = new THREE.MeshStandardMaterial({
            color: 0x333333,
            roughness: 0.8,
            metalness: 0.2
        });
        const groundPlane = new THREE.Mesh(groundGeometry, groundMaterial);
        groundPlane.rotation.x = -Math.PI / 2;
        groundPlane.position.y = -1;
        groundPlane.receiveShadow = true;
        mainScene.add(groundPlane);
        
        // 创建网格辅助线
        const gridHelper = new THREE.GridHelper(50, 50, 0x444444, 0x333333);
        gridHelper.position.y = -0.99;
        mainScene.add(gridHelper);
        
        // 加载3D模型
        let animalModel = null;
        const modelLoader = new GLTFLoader();
        
        modelLoader.load(
            'https://aivogenx.github.io/web3d-file-server/files/model/Fox.glb',
            (gltf) => {
                animalModel = gltf.scene;
                
                // 调整模型大小和位置
                animalModel.scale.set(0.012, 0.012, 0.012);
                animalModel.position.set(-2, 0, 0);
                
                // 配置模型阴影
                animalModel.traverse(child => {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                    }
                });
                
                mainScene.add(animalModel);
                loadingStatus.style.display = 'none';
            },
            (progress) => {
                const percent = Math.round((progress.loaded / progress.total) * 100);
                loadingStatus.textContent = `加载中... ${percent}%`;
            },
            (error) => {
                console.error('模型加载失败:', error);
                loadingStatus.textContent = '加载失败，请刷新页面重试';
            }
        );
        
        // 创建旋转立方体
        const createRotatingCube = () => {
            const cubeGeo = new THREE.BoxGeometry(2, 2, 2);
            const cubeMat = new THREE.MeshStandardMaterial({
                color: 0x42a5f5,
                roughness: 0.5,
                metalness: 0.5
            });
            const cube = new THREE.Mesh(cubeGeo, cubeMat);
            
            cube.position.set(4, 1, 0);
            cube.castShadow = true;
            cube.receiveShadow = true;
            
            return cube;
        };
        
        const rotatingCube = createRotatingCube();
        mainScene.add(rotatingCube);
        
        // 创建GUI控制面板
        const createGUIControls = () => {
            const controlPanel = new GUI({ width: 300 });
            
            // 阴影控制组
            const shadowControls = controlPanel.addFolder('阴影设置');
            shadowControls.add(sceneRenderer.shadowMap, 'enabled', true)
                .name('启用阴影')
                .onChange(() => updateMaterials());
            
            shadowControls.add({ shadowType: 'PCFSoft' }, 'shadowType', ['Basic', 'PCF', 'PCFSoft', 'VSM'])
                .name('阴影类型')
                .onChange(value => {
                    const shadowTypes = {
                        'Basic': THREE.BasicShadowMap,
                        'PCF': THREE.PCFShadowMap,
                        'PCFSoft': THREE.PCFSoftShadowMap,
                        'VSM': THREE.VSMShadowMap
                    };
                    sceneRenderer.shadowMap.type = shadowTypes[value];
                    updateMaterials();
                });
            
            shadowControls.add(groundPlane, 'receiveShadow').name('地面接收阴影');
            shadowControls.add(rotatingCube, 'castShadow').name('立方体投射阴影');
            shadowControls.add(mainLight, 'castShadow').name('光源产生阴影');
            shadowControls.open();
            
            // 光源控制组
            const lightControls = controlPanel.addFolder('光源设置');
            lightControls.add(mainLight, 'intensity', 0, 2, 0.1).name('光照强度');
            lightControls.add(mainLight.position, 'x', -100, 100, 1).name('光源X位置');
            lightControls.add(mainLight.position, 'y', 0, 100, 1).name('光源Y位置');
            lightControls.add(mainLight.position, 'z', -100, 100, 1).name('光源Z位置');
            
            // 立方体控制组
            if (rotatingCube) {
                const cubeControls = controlPanel.addFolder('立方体设置');
                cubeControls.add(rotatingCube.position, 'x', -10, 10, 0.1).name('X位置');
                cubeControls.add(rotatingCube.position, 'y', 0, 10, 0.1).name('Y位置');
                cubeControls.add(rotatingCube.position, 'z', -10, 10, 0.1).name('Z位置');
                cubeControls.add(rotatingCube.scale, 'x', 0.1, 3, 0.1).name('X缩放')
                    .onChange(value => { rotatingCube.scale.y = value; rotatingCube.scale.z = value; });
            }
            
            return controlPanel;
        };
        
        // 更新材质的辅助函数
        function updateMaterials() {
            mainScene.traverse(object => {
                if (object.isMesh) {
                    object.material.needsUpdate = true;
                }
            });
        }
        
        // 初始化GUI
        const guiControls = createGUIControls();
        
        // 动画循环
        function runAnimation() {
            requestAnimationFrame(runAnimation);
            
            // 旋转立方体
            if (rotatingCube) {
                rotatingCube.rotation.x += 0.015;
                rotatingCube.rotation.y += 0.02;
            }
            
            // 模型动画（如果模型已加载）
            if (animalModel) {
                animalModel.rotation.y += 0.005;
            }
            
            // 更新控制器
            cameraControls.update();
            
            // 渲染场景
            sceneRenderer.render(mainScene, viewCamera);
        }
        
        // 启动动画
        runAnimation();
    </script>
</body>
</html>
